<template>
  <h3>2220 杜迎春</h3>
  <div class="top_box">
    <el-input
      v-model="input2"
      class="w-50 m-2"
      placeholder="请输入搜索内容"
      :prefix-icon="Search"
    />
    <div class="btn">
      <el-button type="primary" @click="search(input2)">搜索</el-button>
      <el-button type="primary" @click="dialogFormVisible = true"
        >新增</el-button
      >
    </div>
  </div>
  <div class="table_box">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" prop="">
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
          <!-- {{ store.text }} -->
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="年龄" prop="age" />
      <el-table-column label="地址" prop="address" />
      <el-table-column label="操作" prop="caozuo">
        <template #default="scope">
          <div class="bottom_btn">
            <el-button>编辑</el-button>
            <el-button type="danger" @click="deletebtn(scope.$index+1)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 新增弹窗 -->
  <el-dialog v-model="dialogFormVisible" title="新增">
    <el-form :model="form">
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth">
        <el-input v-model="form.age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="住址" :label-width="formLabelWidth">
        <el-input v-model="form.adress" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addddbtn(form)">
          新增
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>


// 1.引用
import { useStore } from "@/store/info.js";

import { onMounted, ref } from "vue";
const dialogFormVisible = ref(false);
var form = ref({ name: "" });
var input2 = ref();
// var tableData = ref();
var search = (text) => {
  console.log(text);
};


const tableData= [
  {
    name: '2016-05-03',
    age: 'Tom',
    address: '陕西',
  },
  {
    name: '2016-05-03',
    age: 'Tom',
    address: '陕西',
  },
  {
    name: '2016-05-03',
    age: 'Tom',
    address: '陕西',
  },
  {
    name: '2016-05-03',
    age: 'Tom',
    address: '陕西',
  },
]
// 2.创建
let store = useStore();

onMounted(() => {
    // console.log(store);
    store.state=tableData
});


var addddbtn=(form)=>{
    dialogFormVisible.value=false
    console.log(form);
    // store.updatetext(form)
}
// 删除
var deletebtn=(index)=>{
console.log(index);
}
</script>

<style scoped>
.top_box {
  width: 400px;
  display: flex;
}
.btn {
  margin-left: 20px;
  display: flex;
}
.bottom_btn {
  display: flex;
}
</style>